<template>
	<!-- 轮播 -->
	<view class="banner-swiper-wrap u-m-b-10" :style="{ padding: `${Py}rpx ${Px}rpx` }">
		<image  class="imagestyle" :src="detail.path" mode="aspectFill" @tap="onSwiper(detail)"></image>
	</view>
</template>

<script>
/**
 * shBanner-轮播卡片
 * @property {Array} list 轮播图数据，
 * @property {String Number} height 轮播图组件高度，单位rpx（默认250）
 * @property {String} borderRadius 圆角值
 * @event {Function} click 点击轮播图时触发
 */
export default {
	components: {},
	data() {
		return {};
	},
	props: {
		Px: {
			type: [Number, String],
			default: 0
		},
		Py: {
			type: [Number, String],
			default: 0
		},
		// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选
		 
		detail: {},
		// 圆角值
		borderRadius: {
			type: [Number, String],
			default: 0
		},
		// list的高度，单位rpx
		height: {
			type: [Number, String],
			default: 200
		}
	},
	computed: {},
	methods: {
		onSwiper(item) {
			let idlist = item.path.split('/');
				//console.info(JSON.stringify(idlist))
		 
			if(item.url.indexOf("/shangxian")!=-1){
				
				this.$Router.push({
					path: "/pages/goods/shangxian",
					
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	
	.imagestyle {
		border-radius: 1rpx;
		width: 740rpx;
		height: 210rpx;
		}
		.guangshu { display:block; position: relative; width:740rpx; height:210rpx; margin:0 auto;}
		.guangshu:before { content: ""; position: absolute; width:200rpx; height: 100%; top: 0; left: -150rpx; overflow: hidden;
		background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
		background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));
		background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
		background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
		-webkit-transform: skewX(-25deg);
		-moz-transform: skewX(-25deg)
		}
		
		.guangshu:hover:before { left: 150%; transition: left 1s ease 0s; }
	
</style>


